<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单 - 电影网站</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">电影网站</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown" th:if="${session.user != null}">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        <span th:text="${session.user.username}"></span>
                        <span class="badge bg-warning" th:if="${session.user.isVip}">VIP</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/order/vip" th:if="${!session.user.isVip}">开通VIP</a></li>
                        <li><a class="dropdown-item" href="/order/orders">我的订单</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">我的订单</h5>
                    <!-- 修改：根据VIP状态显示不同按钮 -->
                    <a href="/order/vip" class="btn btn-primary btn-sm" th:if="${session.user == null || !session.user.isVip}">开通VIP</a>
                    <a href="/order/vip" class="btn btn-warning btn-sm" th:if="${session.user != null && session.user.isVip}">续费VIP</a>
                </div>

                <div class="card-body">
                    <!-- VIP状态信息 -->
                    <div class="alert alert-info" th:if="${session.user != null and session.user.isVip}">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="alert-heading">
                                    <span class="badge bg-warning text-dark">VIP会员</span>
                                    <span class="ms-2">当前有效期至：</span>
                                </h6>
                                <p class="mb-0 text-lg font-weight-bold" th:text="${#dates.format(session.user.vipExpireTime, 'yyyy-MM-dd HH:mm')}"></p>
                            </div>

                            <div class="text-center">
                                    <span class="badge bg-success p-2" th:if="${remainingDays > 7}">
                                        <i class="bi bi-check-circle"></i> 剩余 <span th:text="${remainingDays}">15</span> 天
                                    </span>
                                    <span class="badge bg-warning text-dark p-2" th:if="${remainingDays <= 7 and remainingDays > 0}">
                                        <i class="bi bi-exclamation-circle"></i> 即将到期 (剩余 <span th:text="${remainingDays}">3</span> 天)
                                    </span>
                                    <span class="badge bg-danger p-2" th:if="${remainingDays <= 0}">
                <i class="bi bi-x-circle"></i> 已过期
            </span>
                            </div>

                        </div>
                        <div class="mt-2">
                            <a href="/order/vip" class="btn btn-sm btn-primary">立即续费</a>
                        </div>
                    </div>

                    <!-- 订单列表 -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>VIP类型</th>
                                <th>金额</th>
                                <th>创建时间</th>
                                <th>支付时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="order : ${orders}">
                                <td th:text="${order.orderNo}"></td>
                                <!-- 修改：补全缺失的</td>标签 -->
                                <td th:text="${order.vipDays} + '天'"></td>
                                <td th:text="'¥' + ${order.amount}"></td>
                                <td th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                                <td th:text="${order.payTime != null ? #dates.format(order.payTime, 'yyyy-MM-dd HH:mm') : '-'}"></td>
                                <td>
                                    <span class="badge bg-success" th:if="${order.status == 1}">已支付</span>
                                    <span class="badge bg-warning" th:if="${order.status == 0}">待支付</span>
                                    <span class="badge bg-danger" th:if="${order.status == -1}">已取消</span>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="btn btn-primary btn-sm"
                                       th:if="${order.status == 0}"
                                       th:onclick="'payOrder(' + ${order.id} + ')'">
                                        去支付
                                    </a>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(orders)}">
                                <td colspan="7" class="text-center">暂无订单记录</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
    function payOrder(orderId) {
        $.ajax({
            url: '/order/pay',
            type: 'POST',
            data: { orderId: orderId },
            success: function(form) {
                var $form = $(form);
                $('body').append($form);
                $form.submit();
            },
            error: function() {
                alert('支付失败，请稍后重试');
            }
        });
    }
</script>
</body>
</html>